<template>
  <div class="male-screen-notice">
    <div class="input-box">
      <el-button type="success" class="btn" @click="addNotice">新建</el-button>
      <template v-if="isDrag">
        <el-button type="primary" @click="saveDrag">保 存</el-button>
        <el-button @click="cancleSave">取 消</el-button>
      </template>
    </div>
    <div class="table-box" v-loading="loading">
      <div class="title-box">
        <div class="item">通知文案</div>
        <div class="item" style="min-width: 171px">详情图</div>
        <div class="item">状态</div>
        <div class="item">场次类型</div>
        <div class="item">发布频次</div>
        <div class="item">操作</div>
      </div>
      <div class="content-box">
        <div
          class="dragging-item"
          v-for="(item, index) in tableData"
          v-dragging="{ item: item, list: tableData }"
          :key="index"
        >
          <div class="item">{{ item.noticeMsg }}</div>
          <div class="item">
            <div class="detail-img" v-if="item.picStatus">
              <img :src="item.detailPic" alt="" />
            </div>
            <div class="no-detail-img" v-else>无</div>
          </div>
          <div class="item">
            <span class="status" :class="{ showColor: item.status === 1 }">{{
              item.status === 1 ? '已显示' : '已隐藏'
            }}</span>
          </div>
          <div class="item">
            <div>
              <p class="type" v-html="typeText[item.sessionType]"></p>
            </div>
          </div>
          <div class="item">
            <div>
              <p class="frequency" v-html="frequency[item.releaseFrequency]"></p>
            </div>
          </div>
          <div class="item">
            <div class="operation">
              <el-button type="text" size="small" @click="editNotice(item, index)">编辑</el-button>
              <el-button type="text" size="small" style="color:#F56C6C;" @click="setShowHide(item, index)" v-if="item.status === 1">隐藏</el-button>
              <el-button type="text" size="small" style="color:#67C23A;" @click="setShowHide(item, index)" v-else>显示</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AddNotice
      :show.sync="show"
      :title="title"
      :noticeData="noticeData"
      @saveAddNotice="saveAddNotice"
    />
  </div>
</template>
<script>
import AddNotice from './components/addNotice'
export default {
  components: {
    AddNotice
  },
  data () {
    return {
      loading: false,
      show: false,
      list: [],
      noticeData: {},
      isDrag: false,
      editIndex: undefined,
      title: '新增公屏通知',
      typeText: {
        0: '普通场<br/>大神场',
        1: '普通场',
        2: '大神场'
      },
      frequency: {
        0: '进房<br/>结束后返回房间',
        1: '进房',
        2: '结束后返回房间'
      },
      tableData: []
    }
  },
  mounted () {
    this.getNotice()
    this.$dragging.$on('dragged', ({ value }) => {
      this.isDrag = true
    })
  },
  methods: {
    // 新建通知
    addNotice () {
      this.show = true
      this.editIndex = undefined
      this.title = '新增公屏通知'
      this.noticeData = {}
    },
    getNotice () {
      this.loading = true
      this.$http.get('/trade/selectScreenNotice').then((res) => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        if (res.code === '0') {
          this.tableData = res.data
        } else {
          this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
          })
        }
      })
    },
    setShowHide (item, index) {
      let status = item.status === 1 ? 0 : 1
      this.$set(this.tableData[index], 'status', status)
      this.$http
        .post('trade/operateScreenNoticeStatus', { id: item.id, operateType: status })
        .then((res) => {
          if (res.code === '0') {
          } else {
            this.$message({
              type: 'error',
              message: '系统异常，请稍后再试'
            })
          }
        })
    },
    editNotice (data, index) {
      this.show = true
      this.title = '编辑公屏通知'
      this.noticeData = JSON.parse(JSON.stringify(data))
      this.editIndex = index
      if (data.sessionType === 0) {
        this.noticeData.sessionType = [1, 2]
      } else {
        this.noticeData.sessionType = [data.sessionType]
      }
      if (data.releaseFrequency === 0) {
        this.noticeData.releaseFrequency = [1, 2]
      } else {
        this.noticeData.releaseFrequency = [data.releaseFrequency]
      }
      this.noticeData.picStatus = data.picStatus === 1
      this.noticeData.qrcodeSwitch = data.qrcodeSwitch === 1
    },
    saveDrag () {
      const data = []
      this.tableData.forEach((item, index) => {
        data.push({
          id: item.id,
          sort: index + 1
        })
      })
      this.$http.post('/trade/editScreenNoticeSort', { data }).then((res) => {
        if (res.code === '0') {
          this.$message.success('保存成功')
          this.isDrag = false
          this.getNotice()
        } else {
          this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
          })
        }
      })
    },
    cancleSave () {
      this.getNotice()
    },
    // 新增编辑公屏通知
    saveAddNotice (saveData) {
      this.$http.post('/trade/createScreenNotice', saveData).then((res) => {
        if (res.code === '0') {
          if (typeof this.editIndex !== 'undefined') {
            this.$set(this.tableData, this.editIndex, saveData)
          } else {
            this.tableData.unshift(saveData)
          }
        } else {
          this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.male-screen-notice {
  .input-box {
    font-size: 13px;
    font-weight: 500;
    .btn {
      margin-top: 10px;
    }
  }
  .table-box {
    margin: 20px 0;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    .title-box {
      display: flex;
      border-bottom: 1px solid #ebeef5;
      .item {
        display: flex;
        align-items: center;
        flex: 1;
        word-break: break-all;
        padding: 10px;
        height: 60px;
        font-size: 14px;
        color: #909399;
        font-weight: bold;
        border-right: 1px solid #ebeef5;
      }
    }

    .content-box {
      .dragging-item {
        display: flex;
        border-bottom: 1px solid #ebeef5;
        .item {
          flex: 1;
          padding: 10px;
          font-size: 14px;
          color: #606266;
          display: flex;
          align-items: center;
          border-right: 1px solid #ebeef5;
          word-break: break-all;
          .status {
            color: #f56c6c;
          }
          .showColor {
            color: #67c23a;
          }
        }
      }
      .detail-img {
        width: 70px;
        img {
          width: 100%;
        }
      }
      .no-detail-img {
        width: 70px;
        text-align: center;
      }
    }
  }
}
</style>
